<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增采购申请')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal" id="form-procurehead-add" th:object="${wmsProcureHead}">

        <div class="form-group">
            <label class="col-sm-2 control-label">采购申请编号：</label>
            <div class="col-sm-4">
                <input name="code" class="form-control" type="text" th:field="*{code}"  readonly>
            </div>
            <label class="col-sm-2 control-label">申请时间：</label>
            <div class="col-sm-4">
                [[${#dates.format(wmsProcureHead.createTime, 'yyyy-MM-dd HH:mm:ss')}]]
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">申请老师：</label>
            <div class="col-sm-4">
                <input name="createBy" class="form-control" th:field="*{createBy}" type="text" readonly>
            </div>
            <label class="col-sm-2 control-label">备注说明：</label>
            <div class="col-sm-4">
                <textarea class="form-control" name="remark" placeholder="请输入备注说明" rows="3" type="text" style="height: 50px;">[[*{remark}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "wms/procurehead";
    var perfixItem = ctx + "wms/procureitem";

    $("#form-procurehead-add").validate({
        focusCleanup: true
    });

    function submitHandler() {

        if ($.validate.form()) {
            var sizeItem = $("input[name='itemList[0].quantity']").length;
            if(sizeItem < 1 ){
                $.modal.alertWarning("请至少添加一个物料");
                return;
            }
            $.operate.save(prefix + "/edit", $('#form-procurehead-add').serialize(),submitBack );
        }
    }
    function submitBack() {
        $.modal.closeTab();
    }
    var prefixItem = ctx + "wms/procureitem";
    var data = [[*{wmsProcureHead.itemList}]];
    var headId= [[*{wmsProcureHead.id}]];
    $(function() {
        var options = {
            data: data,
            exportUrl: perfixItem + "/export?headId="+headId,
            removeUrl: prefix + "/remove",
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            modalName: "采购申请明细",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    width: "5%",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='goods[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'deptId',
                    title: '仓库id',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].deptId' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'deptName',
                    title: '仓库名称',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].deptName' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'code',
                    title: '物品编号',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].code' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'name',
                    title: '物品名称',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].name' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'model',
                    title: '规格型号',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].model' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'type',
                    title: '类型',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].type' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'unit',
                    title: '单位',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='itemList[%s].unit' value='%s' readonly>", index, value);
                        return html;
                    }
                },
                {
                    field: 'quantity',
                    title: '采购数量',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].quantity' value='%s' indexV='"+index+"' onchange='changePrice(this)' required>", index, value);
                        return html;
                    }

                },
                {
                    field: 'planUnitPrice',
                    title: '计划单价',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].planUnitPrice' value='%s' indexV='"+index+"' onchange='changePrice(this)' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'totalPrice',
                    title: '总价',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='itemList[%s].totalPrice' value='%s' readonly>", index, value);
                        return html;
                    }
                }]
        };
        $.table.init(options);
    });
    function addItem() {
        var options = {
            title: "物料选择",

            url: "/wms/materialInfo/materialInfoList",
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }
    function doSubmit(index,layero) {
        var body = $.modal.getChildFrame(index);
        var json = body.find('#json').val();
        $.modal.close(index);
        var arr = JSON.parse(json);
        for(var i=0;i<arr.length;i++){
            addColumn(arr[i])
        }
    }
    function addColumn(row) {
        var row1 = {
            deptId:row.deptId,
            deptName:row.parentName,
            code:row.code,
            name:row.name,
            model:row.model,
            type:row.type,
            unit:row.unit,
            quantity:"0",
            planUnitPrice:"0",
            totalPrice:"0"
        };
        // sub.addColumn(row1,'bootstrap-table');
        sub.addRow(row1,'bootstrap-table')
    }
    function delColumn(row) {
        sub.delRow()
    }
    function changePrice(price) {
        var index = $(price).attr("indexV");
        var quantity = $("input[name='itemList["+index+"].quantity']").val();
        var planUnitPrice = $("input[name='itemList["+index+"].planUnitPrice']").val();

        var total =parseFloat(quantity) * parseFloat(planUnitPrice);
        $("input[name='itemList["+index+"].totalPrice']").val(total);
    }
</script>
</body>
</html>